<!-- 商品分类列表 -->
<template>
  <view>
    <uni-nav-bar backgroundColor="linear-gradient(0deg, #597EF7 100%, #2F54EB 0%) !important" color="#FFFFFF" title="设备管理">
    </uni-nav-bar>
    <view class="container">
      <uni-search-bar
          class="uni-mt-10"
          radius="100"
          placeholder="输入网点/监控点名称或ID"
          clearButton="none"
          cancelButton="none"
          outBgColor="#597EF7"
          @confirm="search"
      />
      <view style="background-color: #ffffff">
        <view style="padding: 10px 0">
          <uni-row>
            <uni-col :span="8">
              <view>
<!--                <uv-collapse @change="change" @close="close" @open="open">-->
<!--                  <uv-collapse-item title="全部网点" name="Docs guide">-->
<!--                    <text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>-->
<!--                  </uv-collapse-item>-->
<!--                </uv-collapse>-->
                <uv-cell-group>
                  <uv-cell
                      title="全部网点"
                      :isLink="true"
                      arrow-direction="down"
                      @click="checkStation()"
                  ></uv-cell>
                </uv-cell-group>
              </view>
            </uni-col>
            <uni-col :span="8">
              <button type="default" size="mini" plain class="top-device-but" @click="checkStation">
                <uni-icons type="settings" color="#2F54EB">网点管理</uni-icons>
              </button>
            </uni-col>
            <uni-col :span="8">
              <button type="default" size="mini" plain class="top-device-but" @click="addStation()">
                <uni-icons type="plus" color="#2F54EB">创建网点</uni-icons>
              </button>
            </uni-col>
          </uni-row>

        </view>

        <view>
          <uv-tabs
              :list="list"
              lineWidth="50"
              lineColor="#2F54EB"
              :activeStyle="{
              color: '#2F54EB',
              fontWeight: 'bold',
              fontSize: '16px',
              transform: 'scale(1.05)',
            }"
              :inactiveStyle="{
              color: '#606266',
              transform: 'scale(1)',
            }"
              itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
              @click="changeTab"
          ></uv-tabs>
        </view>
      </view>
      <view class="device-list-box">
        <uni-collapse>
          <!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
          <uni-collapse-item
              title-border="none"
              :border="false"
              v-for="item in pagination.list"
              :key="item.deviceId"
              class="device-collapse-item"
          >
            <template v-slot:title>
              <uni-row>
                <uni-col :span="7">
                  <view style="align-items: center">
                    <image
                        class="item-image"
                        :src="item.imgUrl ? item.imgUrl : '../../static/icon/device1.png'"
                        mode=""
                    ></image>
                  </view>
                </uni-col>
                <uni-col :span="9">
                  <view style="text-align: left; padding-top: 10px">
                    {{ item.deviceName }}
                  </view>
                  <view class="device-desc">
                    {{ item.productName }}
                  </view>
                  <view class="device-date">
                    到期时间：2024/01/01
                  </view>
                </uni-col>
                <uni-col :span="8">
                  <view style="padding-top: 10px">
                    <uni-tag
                        text="在线"
                        type="success"
                        size="mini"
                        style="padding-right: 5px"
                    />
                    <uni-tag
                        text="制冷"
                        type="success"
                        size="mini"
                        style="padding-right: 5px"
                    />
                    <uni-tag
                        text="正常"
                        type="primary"
                        size="mini"
                        style="padding-right: 5px"
                    />
                  </view>
                  <view class="manager-device-btn-bg">
                    <button class="manager-device-btn" type="primary" size="mini" @click.stop="manager">
                      管理
                    </button>
                  </view>
                </uni-col>
              </uni-row>
            </template>
            <view>
              <view class="mid-time-line">
                {{ (new Date()).toLocaleString() }}
              </view>
              <view>
                <uv-grid align="left" :border="false">
                  <uv-grid-item
                      :customStyle="{ padding: '10px' }"
                      v-for="(boolItem, index) in item.boolList"
                      :key="index"
                  >
                    <uv-row>
                      <uv-col :span="6">
                        <image
                            style="width: 25px; height: 30px"
                            :src="'http://47.99.160.107:8180/admin-api/infra/file/24/get/ysj-status.png'"
                        >
                        </image>
                      </uv-col>
                      <uv-col :span="18">
                        <view>
                          <text>{{ boolItem.value === '1' ? boolItem.trueText : boolItem.falseText }}</text>
                        </view>
                        <view style="color: #606266; font-size: 12px">
                          <text>{{ boolItem.name }}</text>
                        </view>
                      </uv-col>
                    </uv-row>
                  </uv-grid-item>
                  <uv-grid-item
                      :customStyle="{ padding: '10px' }"
                      v-for="(decimalItem, index) in item.decimalList"
                      :key="index"
                  >
                    <uv-row>
                      <uv-col :span="6">
                        <image
                            style="width: 25px; height: 30px"
                            :src="'http://47.99.160.107:8180/admin-api/infra/file/24/get/ysj-status.png'"
                        >
                        </image>
                      </uv-col>
                      <uv-col :span="18">
                        <view>
                          <text>{{ decimalItem.value + decimalItem.unit }}</text>
                        </view>
                        <view style="color: #606266; font-size: 12px">
                          <text>{{ decimalItem.name }}</text>
                        </view>
                      </uv-col>
                    </uv-row>
                  </uv-grid-item>
                  <uv-grid-item
                      :customStyle="{ padding: '10px' }"
                      v-for="(enumItem, index) in item.enumList"
                      :key="index"
                  >
                    <uv-row>
                      <uv-col :span="6">
                        <image
                            style="width: 25px; height: 30px"
                            :src="'http://47.99.160.107:8180/admin-api/infra/file/24/get/ysj-status.png'"
                        >
                        </image>
                      </uv-col>
                      <uv-col :span="18">
                        <view>
                          <text>{{ enumItem.enumList.find(en => en.value === enumItem.value).text }}</text>
                        </view>
                        <view style="color: #606266; font-size: 12px">
                          <text>{{ enumItem.name }}</text>
                        </view>
                      </uv-col>
                    </uv-row>
                  </uv-grid-item>
                </uv-grid>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
      <uv-overlay :show="overShow" @click="overShow = false">
        <view style="height: 300px;border-bottom-right-radius: 15px;border-bottom-left-radius: 15px;background-color: #FFFFFF" @click.stop="test">
          <da-tree
              :data="deptList"
              labelField="name"
              valueField="id"
              showCheckbox
              loadMode
              :loadApi="getNextNode"
              defaultExpandAll
              @change="handleTreeChange"
              @expand="handleExpandChange" />
        </view>
      </uv-overlay>
<!--      <uv-action-sheet-->
<!--          ref="actionSheet"-->
<!--          :actions="localList"-->
<!--          title="网点选择"-->
<!--          @select="selectStation"-->
<!--          @close="close">-->
<!--      </uv-action-sheet>-->
    </view>
    <tab-bar :current-page="1"></tab-bar>
  </view>

</template>

<script>
import {getDeptList, getDevicePage, getDeviceShortList, getDeviceTab, getStationList} from "@/api/device/device";
  import {searchData} from "@/utils/template";
  import TabBar from "@/components/tab-bar/TabBar.vue";
import DaTree from "@/components/da-tree-vue2/index.vue";
import {handleTree} from "@/utils/ruoyi";

  export default {
    components: {DaTree, TabBar},
    computed: {
      searchData() {
        return searchData
      }
    },
    data() {
      return {
        overShow: false,
        style: 'first_two', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
        categoryList: [], // 商品分类树
        activeMenu: 0, // 选中的一级菜单，在 categoryList 的下标
        pagination: {
          // 商品分页
          list: [], // 列表
          total: [], // 总数
          pageNo: 1,
          pageSize: 10,
        },
        loadStatus: '',
        list: [],
        baseList: [
          {
            icon: '/static/icon/lkwd.png',
            title: '冷库温度',
            info: '25.5°C',
          },
          {
            icon: '/static/icon/hswd.png',
            title: '化霜温度',
            info: '26.0°C',
          },
          {
            icon: '/static/icon/ysj-status.png',
            title: '压缩机状态',
            info: '开启',
          },
          {
            icon: '/static/icon/fj-status.png',
            title: '风机状态',
            info: '开启',
          },
          {
            icon: '/static/icon/hs-status.png',
            title: '化霜状态',
            info: '停止',
          },
          {
            icon: '/static/icon/a-elec.png',
            title: 'A相电流',
            info: 'OA',
          },
          {
            icon: '/static/icon/b-elec.png',
            title: 'B相电流',
            info: 'OA',
          },
          {
            icon: '/static/icon/c-elec.png',
            title: 'C相电流',
            info: 'OA',
          },
        ],
        localList: [],
        deptList: [],
      }
    },
    onShow() {
      // this.getDeviceList(this.pagination);
      this.getStationList();
      this.getDeptList();
      this.getTabs();
      this.shortList();
    },
    methods: {
      manager() {
        this.$tab.navigateTo('/pages/device/manager')

      },
      getTabs() {
        getDeviceTab().then((res) => {
          this.list = res.data;
          this.list = this.list.map((item) => {
            return {
              name: item.enums,
              badge: {
                value: item.count,
              }
            }
          });
        });
      },
      shortList() {
        getDeviceShortList().then((res) => {
          console.log(res);
          this.pagination.list = res.data.list;
          this.pagination.list.forEach(item =>{
            item.thingsmodleList = []
            if (item.boolList) {
              item.thingsmodleList.push(...item.boolList)
            }
            if (item.decimalList) {
              item.thingsmodleList.push(...item.decimalList)
            }
            if (item.enumList) {
              item.thingsmodleList.push(...item.enumList)
            }
          })
          console.log(this.pagination.list)
        });
      },
      getDeviceList(e) {
        getDevicePage(e).then((res) => {
          this.pagination.list = res.data.list;
        });
      },
      getDeptList() {
        getDeptList().then((res) => {
          this.deptList = res.data;
          this.deptList = handleTree(this.deptList, 'id', 'parentId');
          if (this.localList.length > 0) {

          }
        });
      },
      test() {
        console.log('test');
      },
      getNextNode(node) {
        return [
          {
            id: 222,
            name: 'test',
          }
        ]
      },
      getStationList() {
        const _that = this
        getStationList().then((res) => {
          //把storeName转换成name
          this.localList = res.data.list;
          this.localList.forEach(item => {
            item.name = item.storeName
            if (item.name) {

            }
          });
        });
      },
      addStation() {
        this.$tab.navigateTo('/pages/device/station')
      },
      changeTab(e) {
        console.log('changeTab', e);
      },
      checkStation(e) {
        // this.$refs.actionSheet.open();
        this.overShow = true;
      },
      selectStation(e) {
        console.log('selectStation', e);
      },
      close(e) {
        console.log('close', e);
      },
      open(e) {
        console.log('open', e)
      },
      change(e) {
        console.log('change', e)
      },
      doExpandTree(keys, expand) {
        this.$refs.DaTreeRef?.setExpandedKeys(keys, expand)

        const gek = this.$refs.DaTreeRef?.getExpandedKeys()
        console.log('当前已展开的KEY ==>', gek)
      },
      doCheckedTree(keys, checked) {
        this.$refs.DaTreeRef?.setCheckedKeys(keys, checked)

        const gek = this.$refs.DaTreeRef?.getCheckedKeys()
        console.log('当前已选中的KEY ==>', gek)
      },
      handleTreeChange(allSelectedKeys, currentItem) {
        console.log('handleTreeChange ==>', allSelectedKeys, currentItem)
      },
      handleExpandChange(expand, currentItem) {
        console.log('handleExpandChange ==>', expand, currentItem)
      },
    },
  }

</script>

<style>
  .container {
    text-align: center;
    padding-top: 10px;
    height: 400px;
    background: linear-gradient(0deg, #f8f8f8 0%, #597ef7 100%);
  }

  .top-device-but {
    color: #2f54eb;
    border: 0 !important;
    font-size: 10px;
  }

  .uni-collapse {
    background-color: #f0f0f0 !important;
  }

  .top-device-but {
    color: #2f54eb;
    border: 0 !important;
    font-size: 10px;
  }

  .device-list-box {
    background-color: #f0f0f0;
    height: 100vh;
    padding-top: 10px;
  }

  .device-collapse-item {
    width: 96%;
    margin: 5px 2%;
    background-color: #ffffff;
    border-radius: 15px;
  }

  .item-image {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    padding: 10px;
  }

  .device-desc {
    text-align: left;
    font-size: 13px;
    color: #606266;
    padding-top: 5px;
  }

  .device-date {
    text-align: left;
    font-size: 12px;
    color: #606266;
    padding-top: 5px;
  }

  .manager-device-btn {
    background-color: #2f54eb;
    color: #ffffff;
    border-radius: 20px;
  }

  .manager-device-btn-bg {
    padding-top: 20px;
    padding-right: 10px;
    text-align: right;
  }

  .mid-time-line {
    background-color: #f0f0f0;
    text-align: center;
    color: #606266;
    padding: 5px;
  }
</style>
